<script setup>
import { ref } from 'vue';
import { useUserStore } from "../store/user"
import { useModalStore } from "../store/modal"
import ElMessage from 'element-plus'

const account = ref("");
const password = ref("");
const rePassword = ref("");

const user =  useUserStore();
const modal =  useModalStore();

 function handleFinish(){
    //密码验证
    if(password.value != rePassword.value){
        ElMessage({
            message: "两次密码不一样!",
            type:"warning"
        });
        return;
    } else {
        //账号验证
        if(user.users.account === account.value){
            ElMessage({
                message:"该账号已经存在",
                type:"warning"
            });
        } else {
            //注册
            user.register(account.value,password.value);
            //关闭注册弹窗
            modal.switchRegVisible();
            ElMessage({
                message:"注册成功",
                type:"success"
            });
        }
    }
 }
</script>
<template>
    <el-dialog width="400px" v-model="modal.register" class="relative">
        <h1 class="text-center c-#404040 text-22px font-normal mb-1.5">注册账号</h1>
        <div class="pb-44px flex items-center justify-center w-full">
            <el-from name="register" autoComplete="off">
                <!--/**账号 */-->
                <el-from-item name="account">
                    <el-input placeholder="请输入账号" v-model="account"></el-input>
                </el-from-item>
                <!--/**密码 */-->
                <el-from-item name="password">
                    <el-input type="password" placeholder="输入密码" v-model="password"></el-input>
                </el-from-item>
                <!--/**确认密码 */-->
                <el-from-item name="re-password">
                    <el-input type="password" placeholder="请再次输入密码" v-model="rePassword"></el-input>
                </el-from-item>
                <el-from-item>
                    <el-button type="primary" @click="handleFinish" class="flex w-full items-center justify-center
                     bg-#444b52 text-white rounded-full">
                     <span>立即注册</span>
                    </el-button>
                </el-from-item>
            </el-from>
        </div>
        <div class="absolute w-full h-44px bottom-0 left-0 bg-{rgba(77,85,93,0.1)} 
        flex items-center justify">
         <span>已有帐号?</span>
         <spa class="text-blue-400 cursor-pointer" 
         @click="()=>{
            modal.switchRegVisible();
            modal.switchLoginVisible();
         }">立即登录</spa>
        </div>
    </el-dialog>
</template>